<template>
    <div class="col card p10">
        <label class="title">抽水参数</label>
        <div class="row_center mt">
            <label class="less min">水桶最小抽水重量:</label>
            <el-input class="num_input" size="small" v-model="ctx.bucket_empty_weight"/>
            <label class="less">克</label>
        </div>
        <div class="row_center mt">
            <label class="less min">蓄热罐抽水超时时间:</label>
            <el-input class="num_input" size="small" v-model="ctx.reserve_draw_timeout"/>
            <label class="less">分钟</label>
        </div>
        <div class="row_center mt">
            <label class="less min">蓄热罐抽水温度:</label>
            <el-input class="num_input" size="small" v-model="ctx.reserve_draw_temp"/>
            <label class="less">℃</label>
        </div>
        <div class="row_center mt">
            <label class="less min">加热罐抽水超时时间:</label>
            <el-input class="num_input" size="small" v-model="ctx.tank_draw_timeout"/>
            <label class="less">分钟</label>
        </div>
        <div class="row_center mt">
            <el-button @click="onClickQuery" type="warning">查询</el-button>
            <el-button @click="onClickSet" type="primary">设置</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { dialog } from '../../service/ui';
import { set_draw_info, get_draw_info } from '../../service/heat_cmd';
import { delay } from '../../service/utils';

interface Ctx {
    bucket_empty_weight: string,
    reserve_draw_timeout: string,
    reserve_draw_temp: string,
    tank_draw_timeout: string,
}

const ctx = reactive<Ctx>({
    bucket_empty_weight: '1000',
    reserve_draw_timeout: '10',
    reserve_draw_temp: '80',
    tank_draw_timeout: '10'
});

async function onClickQuery() {
    try {
        const info = await get_draw_info();
        ctx.bucket_empty_weight = '';
        ctx.reserve_draw_timeout = '';
        ctx.reserve_draw_temp = '';
        ctx.tank_draw_timeout = '';
        await delay(50);
        ctx.bucket_empty_weight = `${info.empty_weight}`;
        ctx.reserve_draw_timeout = `${info.reserve_draw_timeout}`;
        ctx.reserve_draw_temp = `${info.reserve_draw_temp}`;
        ctx.tank_draw_timeout = `${info.tank_draw_timeout}`;
    } catch (msg) {
        dialog.err(msg);
    }
}

async function onClickSet() {
    if ((ctx.bucket_empty_weight.length == 0) ||
        (ctx.reserve_draw_timeout.length == 0) ||
        (ctx.reserve_draw_temp.length == 0) ||
        (ctx.tank_draw_timeout.length == 0)) {
        dialog.err('请输入参数');
        return;
    }

    try {
        const bucket_empty_weight = parseInt(ctx.bucket_empty_weight);
        const reserve_draw_timeout = parseInt(ctx.reserve_draw_timeout);
        const reserve_draw_temp = parseInt(ctx.reserve_draw_temp);
        const tank_draw_timeout = parseInt(ctx.tank_draw_timeout);
        await set_draw_info(bucket_empty_weight, reserve_draw_timeout, reserve_draw_temp, tank_draw_timeout);
        dialog.succ('设置成功');
    } catch (msg) {
        dialog.err(msg);
    }
}

</script>

<style scoped>

.min {
    min-width: 120px;
}

</style>
